<template>
  <div ref="chartRef" style="width: 100%; height: 210px" />
</template>

<script setup>
import { onMounted, watch, nextTick } from "vue";
import { useEcharts } from "../../../../hook/ useEcharts";
import * as echarts from "echarts";
const props = defineProps(["xdata"]);
const { chartRef, initChart, updateChart } = useEcharts();

const getOption = () => ({
  tooltip: {
    trigger: "item",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: "2%",
    right: "1%",
    bottom: "6%",
    top: "20%",
    containLabel: true,
  },
  legend: {
    data: ["调用主数据系统数", "表数量"],
    left: "15%",
    top: "4%",
    textStyle: {
      color: "#fff",
    },
    itemWidth: 15,
    itemHeight: 10,
    itemGap: 25,
  },
  xAxis: {
    type: "category",
    data: props.xdata.xdata,
    axisLine: {
      lineStyle: {
        color: "#0444AD",
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      type: "value",
      name: "单位：个",
      nameTextStyle: {
        color: "#fff",
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#cdd5e2",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#cdd5e2",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        formatter: "{value}", //右侧Y轴文字显示
        textStyle: {
          color: "#fff",
        },
      },
    },
  ],
  series: [
    {
      name: "调用主数据系统数",
      type: "bar",
      barWidth: "25px",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3C7DFB",
            },
            {
              offset: 1,
              color: "#0A285F",
            },
          ]),
          barBorderRadius: 4,
        },
      },
      data: props.xdata.ydata,
    },
    {
      name: "表数量",
      type: "line",
      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      smooth: false, //平滑曲线显示
      symbol: "circle", //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: "#FFD15C",
          shadowColor: "rgba(255, 209, 92, 0.3)",
          shadowBlur: 20,
        },
      },
      lineStyle: {
        color: "#ffa43a",
      },

      data: props.xdata.ydata2,
    },
  ],
});

// 初始化图表
// initChart(option);

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [],
  };
  updateChart(newOption);
};
watch(
  () => props.xdata,
  async (newVal) => {
    await nextTick();
    updateChart(getOption());
  },
  { deep: true }
);
onMounted(() => {
  // 初始化图表
  initChart(getOption());
});
</script>

<style scoped lang="scss"></style>
